<template>
    <div class="container">
        <HeaderBar
            current="category"
        />
        <div class="container_main">
            <div class="content">
                <div class="content-title">分类标签</div>
                <div class="category-list">
                    <div
                        class="category-list-item"
                        v-for="item in categoryList"
                        :key="item.id"
                        @click="chooseStyle(item.id, 'category', item.name)"
                    >
                        <div class="category-list-item-main">
                            <div class="category-list-item-name">{{item.name}}</div>
                            <img
                                :src="item.picture"
                                class="category-list-item-icon"
                                v-if="item.picture"
                            />
                        </div>
                    </div>
                </div>
                <div class="content-title">风格标签</div>
                <div class="style-list">
                    <div
                        class="style-list-item"
                        v-for="(item, index) in styleList"
                        :class="[item.id == styleId ? 'active' : '']"
                        :key="index"
                        @click="chooseStyle(index, 'style', item)"
                    >
                        {{item}}
                    </div>
                </div>
            </div>  
        </div>
    </div>
</template>
<script>
import {
    getCategoryList,
    getStyleList,
} from '@api/shop';
import HeaderBar from '@components/HeaderBar';
export default {
    data() {
        return {
            categoryList: [],
            styleId: 5,
            styleList: []
        }
    },
    components: {
        HeaderBar,
    },
    created () {
        this.getCategory();
        this.getStyle();
    },
    methods: {
        chooseStyle(id, key, name) {
            this.styleId = id;
            this.$router.push({path: '/category/search', query: {type: key, name: encodeURI(name) , id: id}})
        },
        getCategory() {
            getCategoryList()
                .then(res=>{
                    this.categoryList = res.data;
                });
        },
        getStyle() {
            getStyleList()
                .then(res=>{
                    this.styleList = res.data;
                });
        }
    }
}
</script>
<style>
body {
    background: #F6F6F6 !important;
}
</style>
<style scoped>
    @import './index.css';
</style>